<template>
  <panel title="区域设备故障分布">
    <div class="">
      <scatter :width="chartWidth" :height="chartHeight" :options="chartOptions" class="mt10 mb10"></scatter>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'FailureDistribution',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31 - 40}px`
      this.chartOptions = {
        legend: {
          top: 0,
          data: ['供配电', '给排水', '道闸', '门禁']
        },
        xAxis: [{
          type: 'category',
          data: ['2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '8栋', '9栋', '10栋', '13栋', '14栋', '22栋', '北一区', '北二区', '南一区', '南二区']
        }],
        series: [{
          name: '供配电',
          type: 'scatter',
          symbolSize: function (data) {
            // return Math.sqrt(data) * 2
            return 15
          },
          data: [15, 25, 27, 20, 16, 17, 5, 8, 29, 15, 13, 18, 9, 10, 17, 13]
        }, {
          name: '给排水',
          type: 'scatter',
          symbolSize: function (data) {
            // return Math.sqrt(data) * 2
            return 10
          },
          data: [13, 8, 10, 0, 3, 13, 5, 17, 3, 3, 16, 17, 8, 9, 7, 3]
        }, {
          name: '门禁',
          type: 'scatter',
          symbolSize: function (data) {
            // return Math.sqrt(data) * 2
            return 9
          },
          data: [10, 20, 23, 13, 15, 13, 12, 11, 10, 12, 13, 10, 9, 14, 10, 9]
        }, {
          name: '道闸',
          type: 'scatter',
          symbolSize: function (data) {
            // return Math.sqrt(data) * 2
            return 12
          },
          data: [18, 12, 17, 18, 11, 7, 3, 18, 12, 17, 33, 15, 17, 3, 16, 9]
        }]
      }
    }
  }
}
</script>
